<template>
  <div>
    
    <div class="homeHeaderBox">
      <div class="homeHeaderWeclome">
        <div class="homeHeaderWeclomeTitle"><span>您好，</span>欢迎回到Easyd云服务管理后台</div>
      </div>
      <div class="homeHeaderMenuBox">
        <div class="homeHeaderMenuItem">
          <div class="homeHeaderMenuItemIcon">
            <i class="fa fa-user-circle-o"></i>
          </div>
          <div class="homeHeaderMenuItemText">
            <b>0</b>
            <span>待续费</span>
          </div>
        </div>

        <div class="homeHeaderMenuItem">
          <div class="homeHeaderMenuItemIcon">
            <i class="fa fa-wpexplorer"></i>
          </div>
          <div class="homeHeaderMenuItemText">
            <b>0</b>
            <span>待支付订单</span>
          </div>
        </div>
        <div class="homeHeaderMenuItem">
          <div class="homeHeaderMenuItemIcon">
            <i class="fa fa-gg-circle"></i>
          </div>
          <div class="homeHeaderMenuItemText">
            <b>0</b>
            <span>待办工单</span>
          </div>
        </div>
      </div>
    </div>

    <div class="homeApplicationMain">
      <div class="homeApplicationContent">
        <div class="homeApplicationContentItem">
          <div class="homeApplicationContentItemTitle"><i class="fa fa-cloud"></i>我的云应用<span>更多</span></div>
          <div class="homeApplicationContentItemApp">
            <div class="homeApplicationContentItemAppItem">
              <div class="homeApplicationContentItemAppName">企业网站</div>
              <div class="homeApplicationContentItemAppStatus"></div>
              <div class="homeApplicationContentItemAppStatusText">已停止</div>
            </div>
            <div class="homeApplicationContentItemAppItem">
              <div class="homeApplicationContentItemAppName">商城网站</div>
              <div class="homeApplicationContentItemAppStatus" style="background:green"></div>
              <div class="homeApplicationContentItemAppStatusText">运行中</div>
            </div>
            <div class="homeApplicationContentItemAppItem">
              <div class="homeApplicationContentItemAppName">我的博客中心</div>
              <div class="homeApplicationContentItemAppStatus" style="background:green"></div>
              <div class="homeApplicationContentItemAppStatusText">运行中</div>
            </div>
          </div>
        </div>

        <div class="homeApplicationContentItem" style="margin-top:20px;">
          <div class="homeApplicationContentItemTitle"><i class="fa fa-line-chart"></i>访问量预览</div>
          <div class="homeApplicationContentItemBrowerChart">
            <div class="echarts">
              <div class="chart" style="width:98%;height:300px;" ref="myEchartLine"></div>
            </div>
          </div>
        </div>

        <div class="homeApplicationContentItem" style="margin-top:20px;">
          <div class="homeApplicationContentItemTitle"><i class="fa fa-product-hunt"></i>官方系统产品<span>更多</span></div>
          <div class="homeApplicationContentItemProduct">
            <div class="homeApplicationContentItemProductItem">
              <img src="~BUSSINESS_IMAGE/images/product_1.png" />
              <span>CMS内容管理系统</span>
            </div>
            <div class="homeApplicationContentItemProductItem">
              <img src="~BUSSINESS_IMAGE/images/product_1.png" />
              <span>商城管理系统</span>
            </div>
            <div class="homeApplicationContentItemProductItem">
              <img src="~BUSSINESS_IMAGE/images/product_1.png" />
              <span>博客管理系统</span>
            </div>
            <div class="homeApplicationContentItemProductItem">
              <img src="~BUSSINESS_IMAGE/images/product_1.png" />
              <span>OA办公管理系统</span>
            </div>
          </div>
        </div>

      </div>
      <div class="homeApplicationOtherContent">
        <div class="homeApplicationOtherContentItem">
            <div class="homeApplicationOtherContentItemTitle"><i class="fa fa-comments-o"></i>公告通知<span>更多</span></div>
            <div class="homeApplicationOtherContentItemNotifacation">
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】服务器全面升级通知</div>
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】CMS管理系统功能新增通知</div>
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】服务器全面升级通知</div>
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】CMS管理系统功能新增通知</div>
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】服务器全面升级通知服务器全面升级通知</div>
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】CMS管理系统功能新增通知</div>
              <div class="homeApplicationOtherContentItemNotifacatonItem">【公告】服务器全面升级通知</div>
            </div>
        </div>

        <div class="homeApplicationOtherContentItem" style="margin-top:20px;">
          <div class="homeApplicationOtherContentItemBanner">
            <img src="~BUSSINESS_IMAGE/images/guanggao_1.png" />
          </div>
        </div>


      </div>
    </div>
    <!-- <upload-image
      :preview="previewImage"
      v-on:cropperImage="cropperImageClick"
      v-on:uploadImageChange="uploadChange"
    ></upload-image> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      previewImage: ""
    };
  },
  mounted() {
    this.getLineData();
  },
  methods: {
    getLineData(){
      let that = this;
      let myChart = echarts.init(this.$refs.myEchartLine);
      myChart.setOption({
        title: {
          text: ""
        },
        color: ["#6284d3"],
        tooltip: {
          trigger: "axis",
          formatter: "时间 : {b}<br/>收益 : {c}元",
          axisPointer: {
            type: "line"
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            name: "日期",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            boundaryGap: false,
            axisTick: {
              alignWithLabel: true
            },
            nameGap: 2
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "金额（元）"
          }
        ],
        series: [
          {
            name: "柜子使用量",
            //类型为折线图
            type: "line",
            //折线样式
            lineStyle: {
              normal: {
                //宽度
                width: 3,
                //阴影颜色
                shadowColor: "rgba(0,0,0,0.1)",
                // 阴影的模糊范围
                shadowBlur: 10,
                // 阴影的纵向位移量
                shadowOffsetY: 10
              }
            },
            areaStyle: {
              normal: {
                // 折线范围内的背景色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#E7F1F5"
                  },
                  {
                    offset: 1,
                    color: "#E7F1F5"
                  }
                ])
              }
            },
            data: [1, 3, 9, 7, 5, 11, 13]
          }
        ]
      });
      setTimeout(function() {
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }, 500);
    },
    uploadChange(e) {
      var fileObj = e.target.files[0];
      this.$http.Aliyun_uploadImageHttp(fileObj, { dir : '2018' } ,rsUrl => {
        this.previewImage = rsUrl;
      });
    },
    cropperImageClick() {
      var that = this;
      this.$cropperImage({
        //裁切完成后回调函数
        cropperImageResult(file) {
          // that.$http.EasyD_uploadImageHttp(file, {}, rs => {
            that.$http.Aliyun_uploadImageHttp(file, { dir : '/2018' } ,rsUrl => {
              that.previewImage = rsUrl;
            })
          // });
        },
        //要裁切的图片
        imgUrl: that.previewImage
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.homeApplicationMain {
  width 100%
  height auto
  margin-top 15px
  padding-left 10px
  box-sizing border-box
  margin-bottom 10px

  .homeApplicationContent {
    width 75%
    height auto
    margin-bottom 20px
    float left

    .homeApplicationContentItem {
      width 100%
      height auto
      padding-bottom 10px
      background #fff
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      .homeApplicationContentItemBrowerChart {
        width 100%
        height 310px
      }

      .homeApplicationContentItemProduct {
        width 100%
        height 395px

        .homeApplicationContentItemProductItem {
          width 30.5%
          height 180px
          margin-left 2.0%
          background #cccccc
          float left
          overflow hidden
          border-radius 5px
          margin-top 8px
          margin-bottom 10px
          position relative
          cursor pointer

          span {
            position absolute
            left 20px
            bottom 20px
            color #fff
            font-size 20px
          }

          img {
            width 100%
            height 100%
            object-fit cover
          }
        }
      }

      .homeApplicationContentItemTitle {
        width 100%
        height 40px
        padding 15px
        box-sizing border-box
        font-size 14px
        font-weight 500

        i {
          margin-right 5px
          color #333
        }

        span {
          float right
          color #999
        }
      }

      .homeApplicationContentItemApp {
        width 100%
        height 165px

        .homeApplicationContentItemAppItem {
          width 30.5%
          height auto
          float left
          margin-left 2.0%
          border 1px solid #eee
          border-radius 5px
          background #eee
          margin-top 10px
          padding-bottom 18px

          .homeApplicationContentItemAppName {
            width 100%
            height 30px 
            text-align center
            margin-top 20px
            font-size 16px
          }

          .homeApplicationContentItemAppStatus {
            width 20px
            height 20px
            background red
            border-radius 50%
            margin 0px auto
            margin-top 15px
          }

          .homeApplicationContentItemAppStatusText {
            width 100%
            height auto
            text-align center
            font-size 14px
            font-weight 500
            margin-top 15px
          }
        }
      }
    }
  }

  .homeApplicationOtherContent {
    width 23%
    height 1000px
    float right

    .homeApplicationOtherContentItem {
      width 100%
      height auto
      padding-bottom 10px
      background #fff
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);

      .homeApplicationOtherContentItemBanner {
        width 100%
        height 120px

        img {
          width 100%
          height 130px
          object-fit cover
        }
      }

      .homeApplicationOtherContentItemNotifacation {
        width 100%
        height 215px
        padding-left 10px
        padding-right 10px
        box-sizing border-box

        .homeApplicationOtherContentItemNotifacatonItem {
          width 100%
          height 30px
          line-height 30px
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
      }

      .homeApplicationOtherContentItemTitle {
        width 100%
        height 40px
        padding 15px
        box-sizing border-box
        font-size 14px
        font-weight 500

        i {
          margin-right 5px
          color #333
        }

        span {
          float right
          color #999
        }
      }
    }
  }
}

.homeHeaderBox {
  width 100%
  height 60px
  padding-left 10px
  box-sizing border-box

  .homeHeaderMenuBox {
    float right
    width 70%
    height 100%

    .homeHeaderMenuItem {
      width 110px
      height 100%
      float right
      margin-left 25px

      .homeHeaderMenuItemText {
        width 70px
        height 100px
        float left
        margin-top 9px
        text-align center


        b {
          font-size 16px
        }

        span {
          width 100%
          float left
        }
      }

      .homeHeaderMenuItemIcon {
        width 40px
        height 40px
        float left
        margin-top 12px

        i {
          font-size 36px
          color #666
          float left
        }
      }
    }
  }

  .homeHeaderWeclome {
    width 30%
    height 100%
    float left
    line-height 60px
    box-sizing border-box

    .homeHeaderWeclomeTitle {
      font-size 14px

      span {
        font-size 24px
      }
    }
  }
}
</style>
